<template>
  <div>
    <ls-form
      ref="refForm"
      class="ls-form"
      :disabled="false"
      :inline="false"
      label-width="auto"
      :model="formData"
      :config="formConfig"
    >
      <template v-slot:slotName1="row"
        ><div>当前项内容{{ row }}</div></template
      >
      <template v-slot:slotName2="row"
        ><div>{{ row }}内容</div></template
      >
      <template v-slot:headerProp>666555</template>
    </ls-form>
    <el-button @click="submit">确定</el-button>
  </div>
</template>

<script setup>
import RfComplexForm from './index.vue'
import { ref, watch, getCurrentInstance } from 'vue'
const { ctx } = getCurrentInstance()
const refForm = ref(null)
let formData = ref({
  age: 10,
  radio: '2',
  timepicker: new Date(2016, 9, 10, 8, 40),
  timeselect: '',
  date: '',
  year: '',
  speed: '',
  week: '',
  names: 'zs',
  textarea: '',
  hobby: [],
  transfer: [],
  rate: 0,
  treeselect: ['2'],
  slider: 60,
  address: '',
  longitude: '',
  latitude: '',
  pic: '582364703494246400.png',
  file: [],
  checkbox: []
})
let formConfig = ref([
  {
    type: 'upload',
    listType: 'avatar', // 上传模式 avatar 头像, picture-card 照片墙 ,text 文件模式
    prop: 'pic',
    label: '文件上传',
    span: 6,
    row: 3,
    limit: 1, //限制上传文件数量 默认5
    limitSize: 10 * 1024 * 1024, // 10M 限制单个文件大小，单位B 默认100kb
    accept: '.doc,.docx', // 接送文件类型，列：.jpg, .png, .gif
    fileNameProp: 'file_name', // 文件绑定的name的属性名
    fileIdProp: 'file_id', //  文件绑定的id的属性名
    action: '/rf/file/api/file/uploadFile', // 上传地址 默认rf/file/api/file/uploadFile
    viewUrl: '/rf/file/api/file/view/', // 预览地址 默认/rf/file/api/file/view/
    downloadUrl: '', // 下载地址 默认 /rf/file/api/file/downloadFile/
    events: {
      handlerSuccess: () => {}, //上传成功后的回调，返回res，file，fileList
      handlerRemove: () => {} //删除成功后的回调，返回file，fileList
    }
  },

  {
    type: 'text',
    prop: 'speed',
    label: '行驶速度',
    span: 10,
    prefixUnit: '(km/h)',
    labelSuffix: '',
    required: true,
    pattern: 'chinese',
    errMsg: '',
    tips: '（例如：123456）',
    slot: 'suffix',
    events: {
      blur(v) {
        // console.log(v);
      }
    }
  },
  {
    type: 'text',
    label: '姓名输入框',
    prop: 'names',
    placeholder: '请输入文本', // 占位/提示文本
    maxlength: 5, // 最大长度
    prefixText: '单位',
    required: true,
    regexp: 'url',
    errMsg: '请输入正确的网址'
  },
  {
    type: 'treeselect',
    label: '树选择器',
    prop: 'treeselect',
    span: 24,
    // row: 2,
    props: { value: 'id', label: 'label', children: 'children' },
    nodeKey: 'id',
    // multiple: true,
    // showCheckbox: true,
    // 'check-strictly': true,
    // 'render-after-expanded': false,
    options: [
      {
        id: '1',
        label: 'Level one 1',
        children: [
          {
            id: '1-1',
            label: 'Level two 1-1',
            children: [
              {
                id: '1-1-1',
                label: 'Level three 1-1-1'
              }
            ]
          }
        ]
      },
      {
        id: '2',
        label: 'Level one 2',
        children: [
          {
            id: '2-1',
            label: 'Level two 2-1',
            children: [
              {
                id: '2-1-1',
                label: 'Level three 2-1-1'
              }
            ]
          },
          {
            id: '2-2',
            label: 'Level two 2-2',
            children: [
              {
                id: '2-2-1',
                label: 'Level three 2-2-1'
              }
            ]
          }
        ]
      },
      {
        id: '3',
        label: 'Level one 3',
        children: [
          {
            id: '3-1',
            label: 'Level two 3-1',
            children: [
              {
                id: '3-1-1',
                label: 'Level three 3-1-1'
              }
            ]
          },
          {
            id: '3-2',
            label: 'Level two 3-2',
            children: [
              {
                id: '3-2-1',
                label: 'Level three 3-2-1'
              }
            ]
          }
        ]
      }
    ],
    events: {
      change(p1, p2) {
        // console.log(p1);
        // console.log(p2);
      }
    }
  },
  {
    type: 'header',
    prop: 'headerProp',
    span: 10,
    label: '头部插槽1'
  },
  {
    type: 'textarea',
    prop: 'textarea',
    span: 10,
    label: '文本域'
  },
  {
    type: 'select',
    prop: 'hobby',
    span: 12,
    label: '下拉框',
    valueKey: 'customValue', //  value 唯一标识的键名
    labelKey: 'customLabel', //  label 唯一标识的键名
    disabledKey: 'notAllow', // 禁用选项 标识键名
    options: [
      // 下拉框数据配置项
      {
        customLabel: '吃',
        customValue: 1
      },
      {
        customLabel: '喝',
        customValue: 2
      },
      {
        customLabel: '玩',
        customValue: 3
      },
      {
        customLabel: '乐',
        customValue: 4,
        notAllow: true
      }
    ],
    events: {
      change: (row) => {
        selectChange(row)
      }
    }
  },
  {
    type: 'header',
    label: '个人详情',
    span: 8
  },
  {
    type: 'number',
    prop: 'age',
    label: '数字',
    span: 8,
    options: [],
    hide: true,
    prefixText: '单位',
    suffixText: '分钟'
  },
  {
    type: 'color',
    prop: 'theme',
    label: '颜色',
    span: 3
  },
  {
    type: 'radio',
    label: '单选框',
    prop: 'radio',
    labelKey: 'label',
    valueKey: 'value',
    disabledkey: 'disabled',
    options: [
      {
        label: '男',
        value: 0,
        disabled: false, // 禁用
        bind: {} // 其他属性
      },
      {
        label: '女',
        value: '1',
        disabled: false // 禁用
      }
    ],
    events: {
      change: (row) => {
        console.log(row)
      }
    }
  },
  {
    type: 'checkbox',
    prop: 'checkbox',
    label: '复选框',
    span: 12,
    // min: 1,
    // max: 2,
    valueKey: 'ppooss',
    labelKey: 'label',
    options: [
      {
        label: '1旅游',
        ppooss: '5',
        bind: { checked: true }
      },
      {
        label: '2旅游',
        ppooss: '4',
        disabled: true
      },
      {
        label: '3旅游',
        ppooss: '2'
      },
      {
        label: '4旅游',
        ppooss: '3'
      }
    ],
    events: {
      change(r) {
        // console.log('event', r)
      }
    }
  },
  {
    label: '稽查起止时间',
    type: 'datetimepicker',
    dateType: 'datetimerange',
    prop: 'audit_time',
    startPlaceholder: '请选择开始时间',
    endPlaceholder: '请选择结束时间'
  },
  {
    type: 'timeselect',
    label: '时间选择',
    span: 6,
    popperClass: '', // 下拉框的类名 常用于自定义样式
    // 选择配置
    start: '08:30', // 起始时间
    step: '00:15', // 步长
    end: '18:30', // 结束时间
    minTime: '09:00', // 最小时间 小于等于该时间的时间段将被禁用
    maxTime: '18:00' // 最大时间 大于等于该时间的时间段将被禁用
  },
  {
    type: 'datepicker',
    dateType: 'date',
    prop: 'date',
    label: '日期选择器(date)',
    span: 6,
    required: true
  },
  {
    type: 'datepicker',
    dateType: 'daterange',
    prop: 'year',
    label: '日期选择器（daterange）',
    // 'start-placeholder': '请选择开始日期1',
    // startplaceholder: '请选择开始日期1',
    span: 6,
    clearable: false
  },
  {
    type: 'datepicker',
    dateType: 'datetimerange',
    prop: 'week',
    label: '日期时间选择器(datetimerange)',
    span: 6,
    clearable: false
  },
  {
    type: 'timepicker',
    label: '时间选择器',
    prop: 'timepicker',
    isRange: true,
    span: 12,
    required: true,
    events: {
      change: (row) => {
        // console.log(row);
      }
    }
  },

  {
    type: 'cascader',
    label: '专业',
    prop: 'fff',
    span: 12,
    events: {
      change: (val) => {
        // console.log('cascader', val);
      }
    },
    props: { expandTrigger: 'hover' },
    options: [
      {
        value: 'wenke',
        label: '文科',
        children: [
          {
            value: 'lishixi',
            label: '历史系',
            children: [
              {
                value: 'jdlishixi',
                label: '近代史'
              },
              {
                value: 'sqlishixi',
                label: '史前'
              }
            ]
          },
          {
            value: 'wenxue',
            label: '文学系'
          }
        ]
      },
      {
        value: 'like',
        label: '理科'
      }
    ]
  },
  {
    type: 'rate',
    prop: 'rate',
    label: '评分',
    colors: ['99A9BF', '#F7BA2A', '#FF9900'], // 颜色区分 默认不区分 共有 3 个元素，为 3 个分段所对应的颜色
    icons: ['ChatRound', 'ChatLineRound', 'ChatDotRound'], // 共有 3 个元素，为 3 个分段所对应的类名
    showText: true, // 是否展示辅助文本
    texts: ['极差', '失望', '一般', '满意', '惊喜'], //辅助文本数组
    voidIcon: 'ChatRound',
    span: 6
  },
  {
    type: 'slider',
    label: 'slider滑块',
    prop: 'slider',
    span: 6,
    min: 0, // 最小值 默认0
    max: 1000, // 最大值 默认100
    step: 1, // 滑块的步长
    showInput: true, // 是否展示输入框  仅在非区间范围选择时有效 默认false
    showInputControls: true, // 在显示输入框的情况下，是否显示输入框的控制按钮 默认true
    showTooltip: true, // 是否显示tooltip 默认true
    formatTooltip: (value) => {
      return `${value}℃`
    }, //格式化 tooltip message
    range: true, //是否是区间范围选择 默认false
    events: {
      change: (row) => {
        console.log(row) //[start,end]
      }
    }
  },
  {
    type: 'switch',
    label: 'switch',
    prop: 'switch',
    span: 6,
    width: 40, // 宽度(像素) 默认40
    activeIconClass: 'el-icon-delete-solid', //switch 打开时所显示图标的类名，设置此项会忽略 active-text
    inactiveIconClass: 'el-icon-delete', // switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text
    activeText: '打开', // 打开时的文字描述
    inactiveText: '关闭', // 关闭时的文字描述
    activeColor: '#409eff', // 打开时的背景色 默认#409eff
    inactiveColor: '#C0CCDA', //switch 关闭时的背景色 默认#C0CCDA
    validateEvent: false //  改变 switch 状态时是否触发表单的校验 默认true
  },
  {
    type: 'transfer',
    label: '穿梭框',
    prop: 'transfer',
    titles: ['Source', 'Target'],
    buttonTexts: ['到左边', '到右边'],
    data: [
      {
        key: 1,
        label: '选项1'
      },
      {
        key: 2,
        label: '选项2'
      },
      {
        key: 3,
        label: '选项3'
      }
    ]
  },
  {
    type: 'upload',
    label: '文件',
    prop: 'file',
    span: 24,
    row: 3,
    'list-type': 'picture-card'
  },
  {
    type: 'map',
    label: '地图',
    prop: 'address',
    longitude: 'longitude',
    latitude: 'latitude',
    required: true,
    events: {}
  },

  {
    type: 'itemSlot',
    slotName: 'slotName1',
    label: 'item插槽'
  },
  {
    type: 'slot',
    slotName: 'slotName2',
    label: '内容插槽'
  }
])

watch(
  formData,
  (newVal, oldVal) => {
    // console.log('watch formData');
    // console.log(newVal, oldVal);
  },
  { deep: true }
)

const validate = (prop, valid, msg) => {
  // console.log(prop, valid, msg);
}
const selectChange = (row) => {
  // console.log('selectChange', row);
  let data = [
    {
      display: '男',
      label: '0',
      disabled: false // 禁用
    },
    {
      display: '女',
      label: '1',
      disabled: false // 禁用
    }
  ]
  // formData.value.names = 'Iris'; // 修改model的值
  ctx.$refs.refForm.setFormModel(formData.value, 'Carl', 'names') // 修改model的值
  // ctx.$refs.refForm.setFormConfig(formConfig.value, true, 'age', 'hidden'); // 修改config
  ctx.$refs.refForm.setFormConfig(formConfig.value, false, 'age', 'hide') // 修改config
  ctx.$refs.refForm.setFormConfig(formConfig.value, data, 'radio', 'options') // 修改config
}
const submit = () => {
  ctx.$refs.refForm.validate((valid, options) => {
    // console.log(valid, options);
  })
}
</script>
